<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据显示指令</title>
</head>

<body>
    <pre>
        v-text: 填充纯文本
        v-html：填充纯文本，html片段
        v-pre：显示原数据，跳过编译
    </pre>
    <div class="box">
        <p v-text='name'></p>
        <p v-text='info'></p>
        <p v-html='info'></p>
        <p v-pre>{{name}}</p>
        <p v-pre='name'>{{info}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '.box',
            data: {
                name: 'zhangsan',
                info: '<h2>我是张三，18岁了</h2>'
            }
        })
    </script>
</body>

</html>